<script setup>
import {defineProps, ref, watch} from "vue";
import CheckBox from "./Checkbox.vue";

const props = defineProps({
  skinColor: {
    type: String,
    default: '黄一白',
  },
});

const json = ref( [
  {
    type: '0',
    value: '粉一白'
  },
  {
    type: '1',
    value: '粉二白'
  },
  {
    type: '2',
    value: '粉三白'
  },
  {
    type: '3',
    value: '黄一白'
  },
  {
    type: '4',
    value: '黄二白'
  },
  {
    type: '5',
    value: '黄黑皮'
  },
])


watch(
    () => props.skinColor,
    (newVal) => {

      json.value = json.value.map(item => ({...item, checked: item.value === newVal}));
      // console.log('json.value: ', json.value);
    },
    {deep: true, immediate: true}
);


</script>

<template>
  <view class="container">
    肤色：
    <CheckBox :checked="item.checked" :key="index" v-for="(item, index) in json">{{ item.value }}</CheckBox>
  </view>
</template>

<style scoped>
.container {
  padding: 20px 26px;
}
</style>
